<template>
  <div class="mHeader">
    <div class="mHeader-top" v-show="msg.top">
      <div class="mContext mFlexBox">
        <div class="mHeader-top-lefts">
          <span class="mHeader-top-left mHeader-top-left-active">个人银行</span>
          <span class="mHeader-top-left">安全账户</span>
        </div>
        <div class="mHeader-top-rights">
          <span class="mHeader-top-right mHeader-top-right-space"
            >用户登录</span
          >
          <span
            class="mHeader-top-right mHeader-top-right-active mHeader-top-right-margin"
            >忘记密码</span
          >
          <span class="mHeader-top-right mHeader-top-right-margin"
            >人才招聘</span
          >
          <span class="mHeader-top-right mHeader-top-right-margin">管理</span>
          <span class="mHeader-top-right ">管理</span>
        </div>
      </div>
    </div>
    <div class="mHeader-content" v-show="msg.content">
      <div class="mContext mFlexBox">
        <img class="content-img" src="@/assets/logo.gif.png" alt="" />
        <div class="content-box">
          <span class="search"
            ><input
              type="text"
              v-model="keyWord"
              autocomplete="off"
              placeholder="请输入搜索关键字"
              class="el-input__inner search"
          /></span>
          <span class="btn-box " @click="search">搜索</span>
          <span class="btn-box btn-box-margin">网银登录</span>
        </div>
      </div>
    </div>
    <div class="mHeader-bottom" v-show="msg.content">
      <div class="mContext mFlexBox">
        <span
          :class="[
            item.active
              ? 'mHeader-bottom-btn mHeader-bottom-btn-active'
              : 'mHeader-bottom-btn'
          ]"
          v-for="(item, index) in listTemp"
          :key="item.Title"
          @click="menuItemClick(item, index)"
          >{{ item.Title }}</span
        >
      </div>
    </div>
    <div style="height:20px;"></div>
  </div>
</template>

<script>
// import { type } from "os";
export default {
  name: "TheHeader",
  props: {
    msg: {
      type: Object,
      default() {
        return {
          top: true,
          bottom: true,
          content: true
        };
      }
    },
    List: {
      type: Array,
      default() {
        return [
          { id: 1, Title: "信用卡", Route: "/", active: true },
          { id: 2, Title: "银行理财", Route: "/ProductMenu", active: false },
          { id: 3, Title: "个人业务", Route: "", active: false },
          { id: 4, Title: "公司业务", Route: "", active: false },
          { id: 5, Title: "中小企业", Route: "", active: false },
          { id: 6, Title: "电子银行", Route: "", active: false }
        ];
      }
    }
  },
  data() {
    return {
      listTemp: [],
      json: {
        top: true,
        bottom: true,
        content: true
      },
      myRouteHistory: [
        { routeName: "个人业务" },
        { routeName: "财富管理" },
        { routeName: "理财" },
        { routeName: "理财产品购买" }
      ],
      keyWord: ""
    };
  },
  methods: {
    menuItemClick(item, i) {
      if (item.Route && this.$route.path != item.Route) {
        if (item.id === 1) {
          this.$router.push({
            name: "home",
            params: {
              isHeader: true
            }
          });
        } else if (item.id === 2) {
          this.$router.push({
            name: "ProductMenu",
            params: {
              isHeader: true
            }
          });
        }
      }
      this.listTemp.forEach((element, index) => {
        element.active = i === index;
      });
    },
    routeItemClick(item) {
      this.$emit("routeItemClick", item);
    },
    search() {}
  },
  created() {
    this.listTemp = this.List;
  }
};
</script>

<style scoped>
.mHeader {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 1200px;
  margin: 0 auto;
  color: #fff;
  font-size: 12px;
}
.mContext {
  width: 1000px;
  margin: 0 auto;
}
.mHeader-text .mContext {
  text-align: left;
  display: flex;
  align-items: center;
}
.mFlexBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mHeader-top {
  background-color: #e2e6e2;
}
.mHeader-top-lefts {
  color: #8a8d8a;
  cursor: pointer;
}
.mHeader-top-left {
  display: inline-block;
  width: 100px;
  height: 30px;
  line-height: 30px;
  text-align: center;
}
.mHeader-top-left-active {
  background-color: #06469e;
  color: #fff;
}
.mHeader-top-right {
  height: 30px;
  line-height: 30px;
  color: #8a8d8a;
  cursor: pointer;
}
.mHeader-top--space {
  margin-right: 8px;
  cursor: pointer;
}
.mHeader-top-rights .mHeader-top-right-space {
  margin-right: 4px;
}
.mHeader-top-right-margin {
  margin-right: 20px;
}
.mHeader-top-right-active {
  color: #06469e;
}
.mHeader-content {
  display: flex;
  align-items: center;
  height: 80px;
  justify-content: space-between;
  background: url("../assets/background.jpg") center no-repeat;
}
.content-box {
  height: 32px;
  overflow: hidden;
}
.content-img {
  width: 181px;
  height: 52px;
}
.search {
  height: 32px;
  width: 150px;
}
.btn-box {
  height: 32px;
  overflow: hidden;
  padding: 10px 20px;
  background-color: #06469e;
  cursor: pointer;
}
.btn-box-active {
  background-color: #2188fe;
}
.btn-box-margin {
  margin-left: 10px;
  cursor: pointer;
}
.mHeader-bottom {
  width: 100%;
  display: flex;
  align-content: center;
  background: #06469e;
}
.mHeader-bottom-btn {
  width: 200px;
  height: 44px;
  /* background-color: #eee; */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.mHeader-bottom-btn:hover {
  background-color: #012d74;
}
.mHeader-bottom .mHeader-bottom-btn:first-child {
  /* margin-left: 134px; */
}
.mHeader-bottom-btn-active {
  background-color: #012d74;
  cursor: pointer;
}
.mHeader-text {
  display: flex;
  align-items: center;
  background: #fff;
  color: #8a8d8a;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #ccd5cc;
  margin-bottom: 20px;
}
</style>
